'use strict';
import {
    StyleSheet,
    Text,
    View,
    TouchableOpacity,
    Platform,
    StatusBar,
    Image
} from 'react-native';
import React from 'react';

class NavTitle extends React.Component {

    constructor(props) {
        super(props);
        this.state = {

        }
    }
    componentDidMount() {

    }
    render(){
        let {headColor,titleColor,title,leftButton,leftHander,leftImg,leftText,leftTextColor,rightButton,rightText,rightHander,rightColor,rightImg,barColor} = this.props;
        let _leftViewText,_leftViewImg,_rightView;
        if(leftButton && leftText){
            _leftViewText = (
              <Text style={[styles.buttonText,{color:leftTextColor?leftTextColor:'#333'}]}>
                  {leftText?leftText:"返回"}
              </Text>
            )
        }
        if(leftButton && leftImg){
            _leftViewImg = (
              <Image source={leftImg} style={styles.imgBack}/>
            )
        }
        if(rightButton && rightText){
            _rightView = (
              <Text style={[styles.buttonText,{color:leftTextColor?leftTextColor:'#333',fontSize:14}]}>
                  {rightText}
              </Text>
            )
        }
        if(rightButton && rightImg){
            _rightView = (
              <Image source={rightImg} style={styles.imgRightBack} resizeMode="contain"/>
            )
        }
        return(
            <View style={[styles.titleContainer,{backgroundColor:headColor?headColor:'#F84549'}]}>
                <StatusBar
                  // backgroundColor={barColor}
                  hidden={false}
                  barStyle="light-content"
                />
                <TouchableOpacity onPress={leftHander}>
                  <View style={[styles.leftBtn,{width:leftButton?64:0}]} >
                      {_leftViewImg}{_leftViewText}
                  </View>
                </TouchableOpacity>
                <View style={styles.centerTitle}>
                    <Text style={[styles.titleText,{color:titleColor?titleColor:'#333',marginLeft:rightButton?0:-64,marginRight:leftButton?0:-64}]}>
                        {title?title:null}
                    </Text>
                </View>
                <TouchableOpacity onPress={rightHander}>
                  <View style={[styles.leftBtn,{width:rightButton?64:0}]}>
                      {_rightView}
                  </View>
                </TouchableOpacity>
            </View>
        )
    }
};

const styles = StyleSheet.create({
    titleContainer:{
        flexDirection:'row',
        height: Platform.OS === 'ios' ? 64 : 48,
        paddingTop:Platform.OS === 'ios' ? 20 : 0,
        justifyContent:'space-between',
        alignItems:'center'
    },
    leftBtn:{
        flexDirection: 'row',
        alignItems:'center',
        justifyContent:'center',
    },
    imgBack:{
        alignSelf:'center',
        width:20,
        height:20
    },
    imgRightBack:{
        alignSelf:'center',
        marginRight: 5,
        width:60,
    },
    buttonText:{
        fontSize:14,
        alignSelf:'center'
    },
    centerTitle:{
        alignItems:'center',
        alignSelf:'center'
    },
    titleText:{
        alignSelf:'center',
        fontSize:16,
        fontWeight:'bold'
    },
    touchableHighlight:{
        width: Platform.OS === 'ios' ? 64 : 48,
        height: Platform.OS === 'ios' ? 44 : 48,
        alignSelf:'center',
        justifyContent:'center'
    },
});

module.exports = NavTitle;
